<!--      都市  -->
<template>
    <div id="boy">
        <home-head></home-head>
    </div>

    <div class="header-class-main-box">
        <div class="box-header-main">
            <!-- 循环渲染小说列表 -->
            <el-row :gutter="20"> <!-- gutter：列之间的间距 -->
                <el-col
                    v-for="(novel, idx) in novelList"
                    :key="idx"
                    :xs="24"
                    :sm="12"
                    :md="8"
                    :lg="8">
                    <div class="novel-card">
                        <!-- 卡片内容：封面 + 文字信息 -->
                        <div class="card-body" @click="goToDetail(novel.bookId)">
                            <!-- 封面图（无封面时显示默认占位） -->
                            <el-image
                                v-if="novel.cover"
                                :src="novel.cover"
                                class="novel-cover"
                                fit="cover"
                            />
                            <div v-else class="default-cover">暂无封面</div>
                            <!-- 文字信息：标题、作者、简介 -->
                            <div class="novel-info">
                                <!--                                左右排列-->
                                <div style="display: flex;justify-content: space-between;">
                                    <h3 class="novel-title" @click="goToDetail(novel.bookId)">{{ novel.title }}</h3>
                                    <p class="novel-author">{{ novel.author }}</p>
                                </div>
                                <el-divider style="margin: 0"></el-divider>
                                <p class="novel-intro" @click="goToDetail(novel.bookId)">{{ novel.intro }}</p>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="box-bottom-main">
            <el-row :gutter="0">
                <el-col :xs="16" :sm="6" :md="5"  :lg="16">
                    <div class="box-header-main-left">
                        <div class="box-header-main-left-title">
                            分类最近更新
                        </div>

                        <div class="novel-container">
                            <!-- 循环渲染每一行小说数据 -->
                            <el-row
                                v-for="(item, idx) in novelData"
                                :key="idx"
                                class="novel-row">
                                <!-- 分类列：[玄幻小说] -->
                                <el-col :xs="24" :sm="3" :md="3" :lg="3" class="category">
                                    [{{ item.category }}]
                                </el-col>
                                <!-- 书名列 -->
                                <el-col :xs="24" :sm="6" :md="5"  :lg="6" class="title" @click="goToDetail(item.bookId)">
                                    {{ item.title }}
                                </el-col>
                                <!-- 章节列 -->
                                <el-col :xs="24" :sm="9" :md="9"  :lg="9" class="chapter" @click="goToRecommendation(item.chapterOrder)">
                                    <router-link :to="`/chapter/${item.bookId}/${item.chapterOrder}`">
                                        {{ item.chapter }}
                                    </router-link>

                                </el-col>
                                <!-- 作者列 -->
                                <el-col :xs="24" :sm="4" :md="3"  :lg="3" class="author">
                                    {{ item.author }}
                                </el-col>
                                <!-- 更新时间列 -->
                                <el-col :xs="24" :sm="2" :md="2"   :lg="3" class="update-time">
                                    {{ item.updateTime }}
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="6" :sm="6" :md="5"  :lg="6">
                    <div class="box-header-main-right">
                        <div class="box-header-main-left-title">
                            好看的网游小说
                        </div>
                        <div class="novel-container1">
                            <el-row
                                v-for="(item, idx) in Data"
                                :key="idx"
                                class="novel-row">
                                <!-- 书名列 -->
                                <el-col :xs="12" :sm="6" :md="5"  :lg="12" class="title" @click="goToDetail(item.bookId)">
                                    {{ item.title }}
                                </el-col>
                                <!-- 作者列 -->
                                <el-col :xs="12" :sm="6" :md="3"  :lg="12" class="author1">
                                    {{ item.author }}
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    <home-bottom></home-bottom>

</template>

<script setup>
import HomeHead from "@/components/home/home-head.vue";
import {onMounted, ref} from "vue";
import request from '@/utils/request.js';
import {ElLoading} from "element-plus";
import router from "@/router/index.js";
const Name=ref('网游小说');
const goToDetail = (id) => {
    router.push({
        name: 'bookList', // 对应路由配置中的name
        params: { id } // 传递id参数
    });
};

onMounted(() => {
    fetchNovelList();
});

const novelList = ref([])
const novelData = ref()
const Data = ref([])
const fetchNovelList = () => {
    // 显示加载状态
    const loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.1)' // 建议加一点透明度，避免完全遮挡
    });
    // 定义三个请求的Promise
    const request1 = request.get(`/api/books/${Name.value}/list`);
    const request2 = request.get(`/api/books/${Name.value}/noveldata`);
    const request3 = request.get(`/api/books/${Name.value}/data`);
    // 并行执行所有请求
    Promise.all([request1, request2, request3])
        .then(([res1, res2, res3]) => {
            // 处理第一个请求结果
            if (res1.code === 200 && res1.data) {
                novelList.value = res1.data;
            } else {
                ElMessage.error('获取小说列表失败：' + (res1.message || '数据格式错误'));
            }

            // 处理第二个请求结果
            if (res2.code === 200 && res2.data) {
                novelData.value = res2.data;
            } else {
                ElMessage.error('获取小说信息失败：' + (res2.message || '数据格式错误'));
            }

            // 处理第三个请求结果
            if (res3.code === 200 && res3.data) {
                Data.value = res3.data;
            } else {
                ElMessage.error('获取小说作者和标题失败：' + (res3.message || '数据格式错误'));
            }
        })
        .catch(error => {
            // 捕获任何一个请求的网络错误
            ElMessage.error('网络错误：' + (error.message || '请求失败'));
        })
        .finally(() => {
            // 无论成功或失败，都关闭加载状态
            loading.close();
        });
};


</script>

<style scoped>
.header-class-main-box{
    align-items: center; /* 内部元素垂直居中 */
    width: 100%;
    max-width: 1200px; /* 固定最大宽度，避免缩放时过度拉伸 */
    margin: 0 auto; /* 始终水平居中 */
}
.box-header-main{
    margin-top: 20px;
    width: 1200px;
    height: auto;
    background-color: #f3f9ff;
    border-radius: 10px;
    border: 3px solid #e0e0e0;
    box-shadow: 10px 10px 10px rgba(103, 99, 99, 0.1);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    /* 关键：让宽高包含内边距和边框 */
    box-sizing: border-box;
    padding:20px 20px 0 20px; /* 现在添加内边距不会撑开盒子了 */

}
.novel-card{
    margin-bottom: 20px;
}
/* 卡片内容容器：封面 + 文字 */
.card-body {
    display: flex;
}

/* 封面图：统一尺寸 + 圆角 */
.novel-cover {
    width: 250px;
    height: 180px;
    border-radius: 10px 10px 0 0;
}

/* 无封面时的占位样式 */
.default-cover {
    width: 153px;
    height: 123px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border-radius: 10px 10px 0 0;
}

/* 文字信息容器 */
.novel-info {
    width: 100%;
    margin-left: 10px;
}

/* 小说标题 */
.novel-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #afd6ff;
}
.novel-title:hover{
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
    transition: all 0.3s ease;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #f5f5f5;
    max-width: 330px;
}

/* 小说作者 */
.novel-author {
    font-size: 1rem;
    color: #999;
    margin-bottom: 6px;
}

/* 小说简介：多行省略 */
.novel-intro {
    font-size: 1rem;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7; /* 最多显示7行 */
    -webkit-box-orient: vertical;
}
.novel-intro:hover{
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
    transition: all 0.3s ease;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #f5f5f5;
    -webkit-line-clamp: 10000;
}
.box-bottom-main{
    box-sizing: border-box;
    width: 1200px;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
}
.box-header-main-left{
    margin-top: 5px;
    width: 800px;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    border: 3px solid #00b9ff;
    box-shadow: 5px 10px 10px #cdecfa;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.box-header-main-left-title{
    background-color: #8ec4ff;
    font-size: 1.2rem;
    font-weight: 900;
    padding: 10px;
}
.box-header-main-right{
    margin-left: 15px;
    margin-top: 5px;
    width: 400px;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    border: 3px solid #00b9ff;
    box-shadow: 10px 10px 10px #cdecfa;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

/* 外层容器：背景色 + 内边距 */
.novel-container {
    background-color: #eefafd; /* 示例浅灰色背景 */
    padding: 16px;
}
.novel-container1 {
    background-color: #eefafd; /* 示例浅灰色背景 */
    padding: 16px 8px;
}
/* 每一行：弹性布局 + 底部边框分隔 */
.novel-row {
    display: flex;
    align-items: center;
    padding: 5px 0 ;
    border-bottom: 1px solid #eaeaea; /* 行底部分隔线 */
    flex-wrap: wrap; /* 小屏幕下自动换行 */
}

/* 分类样式：灰色文字 */
.category {
    color: #666;
    font-size: 1rem;
}

/* 书名样式：默认文字 */
.title {
    font-size: 1rem;
    color: #96ceff;
}
.title:hover {
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
    transition: all 0.3s ease;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #f5f5f5;
    max-width: 330px;
}

/* 章节样式：深灰色文字 */
.chapter {
    font-size: 1rem;
    color: #333;
    /*    不换行*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.chapter:hover {
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
    transition: all 0.3s ease;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #f5f5f5;
    max-width: 330px;
}

/* 作者样式：浅灰色文字 */
.author {
    font-size: 1rem;
    color: #999;
}
.author1 {
    font-size: 1rem;
    text-align: right;

}
/* 更新时间样式：浅灰色文字 */
.update-time {
    font-size: 1rem;
    color: #999;
    text-align: right;
}

/* 响应式适配：小屏幕下（<768px）列占满宽度 */
@media (max-width: 768px) {
    .novel-row > .el-col {
        width: 100% !important;
        margin-bottom: 4px;
    }
}
</style>